<?php
$p = isset($_REQUEST['p']) ? $_REQUEST['p'] : ''; 
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : '';

$data = json_decode(file_get_contents('audios.json'), true);
if ($p == '' || !isset($data[$p]))
  $p = '01';

$audios = $data[$p]['audios'];
$audio = $audios[0];

if ($id) {
  for($n = 0; $n < count($audios); $n++) {
    if ($audios[$n]['id'] == $id) {
      $audio = $audios[$n];
    }
  }
}

?>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title><?php echo $data[$p]['title']; ?></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <script type="text/javascript" src="assets/amui/js/jquery.min.js"></script>
  <script type="text/javascript" src="assets/amui/js/amazeui.min.js"></script>

  <script type="text/javascript" src="assets/jplayer/2.5.0/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="assets/jplayer/2.5.0/circle.skin/jquery.transform2d.js"></script>
  <script type="text/javascript" src="assets/jplayer/2.5.0/circle.skin/jquery.grab.js"></script>
  <script type="text/javascript" src="assets/jplayer/2.5.0/circle.skin/mod.csstransforms.min.js"></script>
  <script type="text/javascript" src="assets/jplayer/2.5.0/circle.skin/circle.player.js"></script>

  <link rel="stylesheet" href="assets/amui/css/amazeui.css"/>  
  <link href="assets/jplayer/2.5.0/circle.skin/circle.player.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="assets/css/app.css"/>  
</head>
<body>


<section class="detail">
    <h1></h1>
    <h1></h1>
    <div id="audio-player">
      <div id="jquery_jplayer_1" class="cp-jplayer"></div>       
            <div id="cp_container_1" class="cp-container">
                <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
                    <div class="cp-buffer-1"></div>
                    <div class="cp-buffer-2"></div>
                </div>
                <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
                    <div class="cp-progress-1"></div>
                    <div class="cp-progress-2"></div>
                </div>
                <div class="cp-circle-control"></div>
                <ul class="cp-controls">
                    <li><a class="cp-play" tabindex="1">play</a></li>
                    <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
                </ul>
            </div>
    </div>
    <h1></h1>
</section>

<script type="text/javascript">
$(function(){
  $('#audio-player').css({paddingLeft:($('body').width() - 200) / 2});
  var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
    {
        mp3: "audios/<?php echo urlencode($audio['file']); ?>"
    }, {
        cssSelectorAncestor: "#cp_container_1",
        swfPath: "assets/jplayer/2.5.0",
        wmode: "window",
        keyEnabled: true
    });
});
</script>



<div id="widget-list">
	 <ul class="am-list m-widget-list">
		<?php
		for($n = 0; $n < count($audios); $n++) {
		?>
		<li>
			<a href="index.php?p=<?php echo $p; ?>&id=<?php echo $audios[$n]['id']; ?>">
			 	<table>
			 		<tr>
            <!-- <td><img class="widget-icon" src="images/audio.png" style="width: 32px;height: 32px;"></td> -->
            <td><span class="widget-name"><?php echo $audios[$n]['title']; ?></span></td>
          </tr>
        </table>
      </a>
	 </li>
	 <?php
		}
	 ?>
	</ul>
</div>
<footer class="footer">
  <div class="amz-container">
    <img class="widget-icon" src="images/gjzdryzb22tk.png" style="max-width: 75%;"> 
  </div>
  
</footer>

</body>
</html>

